<template>
  <div>
    <div id="compare" ref="compare" class="box lineboxcomp" />
  </div>
</template>

<script>
const elementResizeDetectorMaker = require("element-resize-detector");
import { AjaxToken } from "@/api/common";
import { string } from "jszip/lib/support";
export default {
  props: {
    CpnID: "",
    ChnanelId: "",
    selectType: 0,
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      mychart: null,
      list: [],
    };
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.initChart();
    var box = document.getElementById("compare");
    const erd = elementResizeDetectorMaker();
    const that = this;
    erd.listenTo(document.getElementById("compare"), function (element) {
      that.$nextTick(function () {
        // 使echarts尺寸重置
        // console.log("========");
        that.mychart.resize();
      });
    });
    window.addEventListener("resize", () => {
      this.mychart.resize();
    });
  },
  methods: {
    initChart() {
      this.mychart = this.$echarts.init(this.$refs.compare);
      this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", this.selectType);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "",
        spinner: "el-icon-loading",

        target: document.querySelector(".lineboxcomp"),
      });
      backstage.GetCpnMonyAndErpChart(this, params, loading);
    },
  },
};
var backstage = {
  // 获取Mngrbaseinfo集合
  GetCpnMonyAndErpChart: function (thisobj, params, loading) {
    setTimeout(function () {
      AjaxToken(
        thisobj,
        "GetCpnMonyAndErpChart",
        params,
        "post",
        function (res) {
          loading.close();

          var Erp_Data = [];
          var Th_data = [];
          var legenddata = [];
          res.data.data.forEach((element) => {
            legenddata.push(element.name);
            Erp_Data.push(element.linedata_erp);
            Th_data.push(element.linedata_th);
          });
          //  根据数据多条自动调整柱状图间隙
          let Gap = 80;
          for (let i = 1; i < legenddata.length; i++) {
            Gap = Gap - 6;
            if (Gap <= 0) {
              return;
            }
          }
          Gap = Gap + "%";

          var option = {
            color: ["#409eff", "#06C141"],
            grid: {
              left: 150,
              top: "10%",
            },
            title: {
              text: "近三个月各企业支付交易总额与ERP交易总额对比(单位/万元)",
              textStyle: {
                // 文字颜色
                color: "rgba(0, 0, 0, 0.85)",
                // 字体风格,'normal','italic','oblique'

                // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight: "bold",
                // 字体系列
                fontFamily: "sans-serif",
                // 字体大小
                fontSize: 16,
              },
              top: "3%",
              left: "20",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            xAxis: {
              axisLine: {
                lineStyle: { color: "#ccc" },
              },
              axisLabel: {
                textStyle: { color: "#777" },
              },
            },
            yAxis: [
              {
                // name: "所属行业",
                nameLocation: "start",
                nameTextStyle: {
                  fontWeight: "bold",
                },
                position: "left",
                offset: 100,
                axisLine: {
                  onZero: false,
                  show: false,
                },
                axisTick: {
                  length: 70,
                  inside: true,
                  lineStyle: { color: "#ccc" },
                },
                axisLabel: {
                  inside: true,
                },
                inverse: true,
                data: legenddata,
              },
            ],
            series: [
              {
                type: "bar",
                barGap: Gap,
                barWidth: 30,
                data: Erp_Data,
                label: {
                  normal: {
                    show: true,
                    position: "left",
                    textStyle: { color: "#000" },
                    formatter: "ERP交易额",
                  },
                },
              },
              {
                type: "bar",
                barGap: Gap,
                barWidth: 30,
                data: Th_data,
                label: {
                  normal: {
                    show: true,
                    position: "left",
                    textStyle: { color: "#000" },
                    formatter: "三方交易额",
                  },
                },
              },
            ],
          };
          thisobj.mychart.setOption(option);

          window.addEventListener("resize", () => {
            thisobj.mychart.resize();
          });
        },
        function (err) {}
      );
    }, 1 * 1000);
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  /* height: 59rem; */
  height: 952px;
}
</style>

